import React, { useState, useEffect } from "react";
import { Col, Row, Card, Table } from "antd";
import * as Icon from "@ant-design/icons";
import * as echarts from "echarts";
import "./home.css";
import { getData } from "../../api";

const Home = () => {
  const [tableData, setTableData] = useState([]);
  const userImg = require("../../assets/images/user.jpg");
  useEffect(() => {
    getTableData();
  }, []);

  const getTableData = async () => {
    const {
      data: { list },
    } = await getData();
    setTableData(list);

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  };

  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
    },
    {
      title: "城市",
      dataIndex: "city",
    },
  ];

  const countData = [
    {
      name: "今日支付订单",
      value: 1234,
      icon: "CheckCircleOutlined",
      color: "#ffb980",
    },
    {
      name: "今日支付订单",
      value: 1234,
      icon: "CheckCircleOutlined",
      color: "#ffb980",
    },
    {
      name: "今日支付订单",
      value: 1234,
      icon: "CheckCircleOutlined",
      color: "#ffb980",
    },
    {
      name: "今日支付订单",
      value: 1234,
      icon: "CheckCircleOutlined",
      color: "#ffb980",
    },
    {
      name: "今日支付订单",
      value: 1234,
      icon: "CheckCircleOutlined",
      color: "#ffb980",
    },
    {
      name: "今日支付订单",
      value: 1234,
      icon: "CheckCircleOutlined",
      color: "#ffb980",
    },
  ];

  const iconToElement = (name) => React.createElement(Icon[name]);

  return (
    <Row className="home">
      <Col span={8}>
        <Card hoverable>
          <div className="user">
            <img alt="" src={userImg} />
            <div className="userinfo">
              <p className="name">Admin</p>
              <p className="access">超级管理员</p>
            </div>
          </div>
          <div className="login-info">
            <p>
              上次登录时间: <span>2024-09-26</span>
            </p>
            <p>
              上次登录地点: <span>成都</span>
            </p>
          </div>
        </Card>
        <Card hoverable className="table-wrap">
          <Table
            rowKey={"id"}
            columns={columns}
            dataSource={tableData}
            pagination={false}
          />
        </Card>
      </Col>
      <Col span={16}>
        <div className="num">
          {countData.map((item, index) => {
            return (
              <Card hoverable key={index}>
                <div
                  className="icon-box"
                  style={{ backgroundColor: item.color }}
                >
                  {iconToElement(item.icon)}
                </div>
                <div className="detail">
                  <p className="num">￥{item.value}</p>
                  <p className="txt">{item.name}</p>
                </div>
              </Card>
            );
          })}
        </div>
        <div id="main" style={{ height: "300px" }}></div>
      </Col>
    </Row>
  );
};

export default Home;
